<template>
  <div class="searchResult">
    <van-sticky>
      <van-nav-bar left-arrow class="nvaBar" @click-left="left">
        <template #title>
          <div class="title">
            搜索结果页
          </div>
        </template>
      </van-nav-bar>
    </van-sticky>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="content" v-for="(item, index) in list" :key="index">
        <div class="content-item">
          <searchItem
            :item="item"
            @skipClick="goDetail(item.art_id)"
          ></searchItem>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import searchItem from './searchItem'
import { apiGetSearch } from '@/api/other.js'
export default {
  name: 'searchResult',
  data () {
    return {
      q: this.$route.params.key, // 搜索关键词
      list: [], // 数据列表
      page: 0, // 页码
      loading: false, // 下拉刷新
      finished: false // 加载状态
    }
  },
  components: {
    searchItem
  },
  async created () {
    // const res = await apiGetSearch({
    //   page: this.page,
    //   q: this.q
    // })
    // console.log(res)
    // this.list = res.data.data.results
    this.onLoad()
    // console.log(this.$route.params.key)
  },
  methods: {
    left () {
      this.$router.push('/search')
    },
    // 跳转详情页
    goDetail (id) {
      this.$router.push('/detail/' + id + '?next=' + '/search')
    },
    async onLoad () {
      this.page++
      const res = await apiGetSearch({
        page: this.page,
        q: this.q
      })
      // console.log(res)
      this.list.push(...res.data.data.results)
      this.loading = false
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.searchResult {
  .nvaBar {
    background-color: #d0584d;

    .title {
      color: #fff;
    }

    /deep/ .van-icon {
      color: #fff;
    }
  }
  .content {
    .content-item {
      padding: 0 1px;
      margin: 10px 0;
      border-bottom: 1px solid #f6f7f7;
    }
    padding: 0 15px;
  }
}
</style>
